window.onload = () => {
  let VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute  float  a_Size;' +
    'void main(){\n' +
    'gl_Position = a_Position;\n' +
    'gl_PointSize = a_Size;\n' +
    '}\n';

  let FSHADER_SOURCE =
    'void main(){\n' +
    'precision mediump float;\n' +
    'float dist = distance(gl_PointCoord, vec2(0.5,0.5));\n' +
    'if(dist<0.5){\n' +
    'gl_FragColor = vec4(0.6,0.5,0.4,0.8);\n' +
    '}else{discard;}\n' +
    '}\n';

  const main = () => {
    let canvas = document.getElementById('webgl');
    let gl = getWebGLContext(canvas);

    if (!gl) {
      console.log('Failed to get the rendering context for WebGL');
      return;
    }
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
      console.log('Failed to initialize shaders');
      return;
    }

    let n = initVertexBuffers(gl);
    if (n < 0) {
      console.log('Failed to set the position of the vectices');
      return;
    }

    gl.clearColor(0.0, 0.0, 0.0, 0.5);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, n);
  }
  const initVertexBuffers = (gl) => {
    //data
    let vertices = new Float32Array([
      0.5, 0.5, -0.5, -0.5, -0.5, 0.5
    ]);
    let n = 3;
    //create buffer
    let vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
      console.log('Failed to create buffer object!');
      return;
    }
    //bind buffer 
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //write data to buffer 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    //point to attribute 
    let a_Positionaddr = gl.getAttribLocation(gl.program, 'a_Position');
    let a_Size = gl.getAttribLocation(gl.program, 'a_Size');
    gl.vertexAttrib1f(a_Size, 20.0);
    // gl.uniform4f(a_Size, 10.0);
    gl.vertexAttribPointer(a_Positionaddr, 2, gl.FLOAT, false, 0, 0);
    //enable attribute
    gl.enableVertexAttribArray(a_Positionaddr);
    return n;
  }
  main();

};